<template>
  <v-app :theme="theme">
    <router-view />
  </v-app>
</template>

<script setup lang="ts">
import { ref, onMounted, inject } from 'vue'
import { useTheme } from 'vuetify'

const vuetifyTheme = useTheme()
const theme = ref<'light' | 'dark'>('light')

// 检查系统主题
const checkSystemTheme = () => {
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
  theme.value = isDark ? 'dark' : 'light'
  vuetifyTheme.global.name.value = theme.value
}

// 监听系统主题变化
const watchSystemTheme = () => {
  window.matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', checkSystemTheme)
}

// 切换主题
const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
  vuetifyTheme.global.name.value = theme.value
  localStorage.setItem('theme', theme.value)
}

// 注册主题切换函数
const registerThemeToggle = inject('registerThemeToggle') as (callback: () => void) => void
if (registerThemeToggle) {
  registerThemeToggle(toggleTheme)
}

// 初始化主题
onMounted(() => {
  // 优先使用存储的主题设置
  const savedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null
  if (savedTheme) {
    theme.value = savedTheme
    vuetifyTheme.global.name.value = savedTheme
  } else {
    // 如果没有存储的主题，则使用系统主题
    checkSystemTheme()
    watchSystemTheme()
  }
})

// 导出给其他组件使用
defineExpose({
  toggleTheme,
  theme
})
</script>

<style>
html, body {
  overflow: hidden;
}

#app {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

.v-application {
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  max-width: none !important;
}

.v-application__wrap {
  width: 100% !important;
  min-height: 100vh !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
</style>